<template>
	<div class="temu-lirun-product-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
			<el-form :model="state.temuLirunProduct" size="default" label-width="140px">
				<el-row :gutter="25">

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="项目名称">
							<el-input v-model="state.temuLirunProduct.name" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否自定义产品信息">
							<el-radio-group v-model="state.dialog.customProduct">
								<el-radio :value="true">是</el-radio>
								<el-radio :value="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<template v-if="state.dialog.customProduct">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="产品名称">
								<el-input v-model="state.temuLirunProduct.productName" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="一级品类">
								<el-input v-model="state.temuLirunProduct.plOne" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="二级品类">
								<el-input v-model="state.temuLirunProduct.plTwo" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="变体1">
								<el-input v-model="state.temuLirunProduct.variantCodeOne" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="变体2">
								<el-input v-model="state.temuLirunProduct.variantCodeTwo" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="产品长度单位">
								<el-select v-model="state.temuLirunProduct.productUnit" placeholder="选择长度单位" clearable
									class="w100">
									<el-option label="厘米" value="CM"></el-option>
									<el-option label="米" value="M"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="产品重量单位">
								<el-select v-model="state.temuLirunProduct.weightUnit" placeholder="选择重量单位" clearable
									class="w100">
									<el-option label="千克" value="KG"></el-option>
									<el-option label="磅" value="LB"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</template>

					<template v-else>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="产品">
								<el-select v-model="state.temuLirunProduct.productId" placeholder="选择产品" clearable
									class="w100">
									<el-option v-for="option in state.productOption" :key="option.id"
										:label="option.name" :value="option.id" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="头程运费价格">
							<el-row>
								<el-col :span="16">
									<el-input v-model="state.temuLirunProduct.headFreightPrice" clearable></el-input>
								</el-col>
								<el-col :span="8">
									<p style="margin: 0; line-height: 32px; text-align: center;">RMB/立方</p>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="海外仓价格">
							<el-row>
								<el-col :span="16">
									<el-input v-model="state.temuLirunProduct.foreignWarehousePrice" clearable></el-input>
								</el-col>
								<el-col :span="8">
									<p style="margin: 0; line-height: 32px; text-align: center;">JPY/立方</p>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="across保管价格">
							<el-row>
								<el-col :span="16">
									<el-input v-model="state.temuLirunProduct.acrossStoragePrice" clearable></el-input>
								</el-col>
								<el-col :span="8">
									<p style="margin: 0; line-height: 32px; text-align: center;">JPY/立方</p>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="税金比例">
							<el-row>
								<el-col :span="16">
									<el-input v-model="state.temuLirunProduct.taxPer" clearable></el-input>
								</el-col>
								<el-col :span="8">
									<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="temuLirunProductDialog">
import { reactive, ref, onMounted } from 'vue';
import { useProductApi } from '/@/api/mainData/product';
import { useTemuLirunApi } from '/@/api/calculate/temuLirun';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive<TemuLirunProductEditState>({
	temuLirunProduct: {
		id: '',
		productId: '',
		productName: '',
		name: '', 					// 项目名称
		plOne: '', 					// 一级品类
		plTwo: '', 					// 二级品类
		variantCodeOne: '',			//变体1
		variantCodeTwo: '',			//变体2
		status: '',
		priceUnit: '',				//售价单位
		productUnit: '',			//产品长度单位
		weightUnit: '',				//重量单位
		headFreightPrice:'',		//头程运费价格
		foreignWarehousePrice:'',	//海外仓价格
		acrossStoragePrice:'',		//across保管价格
		taxPer:'',					//税金比例
	},
	productOption: [] as Product[],
	dialog: {
		isShowDialog: false,
		customProduct: true,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 引入 api 请求接口
const temuLirunApi = useTemuLirunApi();
const productApi = useProductApi();

// 初始化产品数据
async function initProductOption() {
	const produsts = await productApi.queryAllProductList()
	if (produsts.data == null)
		return Promise.resolve(true);
	const productList: TemuLirunProduct[] = produsts.data.rows;
	state.productOption = productList;
}

// 打开弹窗
async function openDialog(type: string, productId?: number) {
	if (type === 'edit') {
		const param = {
			'id': productId,
		}
		const result = await temuLirunApi.temuLirunProductDetail(param);
		if (result.data.length == 0)
			return Promise.resolve(true);
		const productDetail: TemuLirunProduct = result.data;
		state.temuLirunProduct = productDetail;
		
		if(null != productDetail.productId){
			state.dialog.customProduct = false;
		}

		state.dialog.title = '修改项目';
		state.dialog.submitTxt = '修 改';
	} else {
		state.dialog.title = '新增项目';
		state.dialog.submitTxt = '新 增';
		clearMaoriProduct();
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};

// 清空表单
const clearMaoriProduct = () => {
	state.temuLirunProduct = {
		id: '',
		productId: '',
		productName: '',
		name: '', 					// 项目名称
		plOne: '', 					// 一级品类
		plTwo: '', 					// 二级品类
		variantCodeOne: '',			//变体1
		variantCodeTwo: '',			//变体2
		status: '',
		priceUnit: '',				//售价单位
		productUnit: '',			//产品长度单位
		weightUnit: '',				//重量单位
		headFreightPrice:'',		//头程运费价格
		foreignWarehousePrice:'',	//海外仓价格
		acrossStoragePrice:'',		//across保管价格
		taxPer:'',					//税金比例
	};
}

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 提交
async function onSubmit() {
	if (state.dialog.customProduct) {
		state.temuLirunProduct.productId = '';
	}
	await temuLirunApi.editTemuLirunProduct(state.temuLirunProduct);
	closeDialog(); // 关闭弹窗
	emit('refresh');
};

// 页面加载时
onMounted(() => {
	initProductOption();
});

// 暴露变量
defineExpose({
	openDialog,
});
</script>../../../../../api/mainData/product